<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章列表</title>
    <link href="bootstrap-5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap-5.3.0/js/bootstrap.bundle.min.js"></script>
    <script src="vue@3.5.4/vue.global.js"></script>
    <script src="axios@1.7.7/axios.min.js"></script>
    <!--    <script src="jquery-3.7.1/jquery-3.7.1.min.js"></script>-->
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
        <ul class="nav">
            <li class="nav-item">
                <a aria-current="page" class="navbar-brand" href="#">工院论坛</a>
            </li>
            <li class="nav-item">
                <a aria-current="page" class="nav-link active" href="#">首页</a>
            </li>
        </ul>
        <button class="btn btn-primary" data-bs-target="#exampleModal" data-bs-toggle="modal" type="button">
            添加文章
        </button>
    </div>
</nav>
<div class="container-fluid" id="app">
    <table class="table table-striped">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">标题</th>
            <th scope="col">内容</th>
            <th scope="col">评论数</th>
            <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(article, index) in articles">
            <th scope="row">{{index + 1}}</th>
            <td>{{article.title}}</td>
            <td>{{article.content}}</td>
            <td>{{article.commentList.length}}</td>
            <td>
                <a :href="'article.html?id=' + article.id">
                    <button class="btn btn-info">查看</button>
                </a>
                <button @click="removeArticle(article.id)" class="btn btn-danger">删除</button>
            </td>
        </tr>
        </tbody>
    </table>

    <!-- Modal -->
    <div aria-hidden="true" aria-labelledby="exampleModalLabel" class="modal fade" id="exampleModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">添加文章</h1>
                    <button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label" for="exampleFormControlInput1">标题</label>
                        <input class="form-control" id="exampleFormControlInput1" placeholder="请输入标题" type="text"
                               v-model="article.title">
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="exampleFormControlTextarea1">内容</label>
                        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
                                  v-model="article.content"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-bs-dismiss="modal" type="button">关闭</button>
                    <button @click="insertArticle" class="btn btn-primary" data-bs-dismiss="modal" type="button">提交
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    const app = {
      data() {
        return {
          article: {
            title: '测试文章',
            content: '测试内容内容'
          },
          articles: []
        }
      },
      mounted () {
        this.loadArticles()
      },
      methods: {
        loadArticles() {
            axios.get('/article').then(resp => {
                console.log('resp = ',resp)
                console.log('resp.data = ', resp.data)
                // 处理成功情况
                if(!!resp.data && resp.data.code === 0) {
                    this.articles = resp.data.data
                }
              })
        },
        insertArticle() {
          axios.post('/article', this.article, {
              headers: {
                'Content-Type': 'application/json'
              }
          }).then(resp => {
            console.log('resp = ', resp)
            if(!!resp.data && resp.data.code === 0) {
                this.article.commentList = []
                this.articles.push(this.article)
            }
          })
        },
        removeArticle(id) {
            axios.delete('/article/'+id).then(resp => {
            console.log('resp = ', resp)
            // 处理成功情况
            if(!!resp.data && resp.data.code === 0) {
                this.loadArticles()
            }
          })
        }
      }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>